<template>
  <el-dialog :title="title" :visible.sync="open" width="600px">
    <el-form ref="formData" :rules="rules" :model="formData" label-width="120px" size="mini">
      <el-form-item prop="planName" label="计划标识">
        <el-input v-model="formData.planName"></el-input>
      </el-form-item>
      <el-form-item prop="accountId" label="账号">
        <el-select v-model="formData.accountId" filterable clearable placeholder="请选择">
          <el-option
            v-for="item in accountList"
            :key="item.sellerId"
            :label="item.sellerName"
            :value="item.sellerId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="siteId" label="站点">
        <el-select v-model="formData.siteId" filterable clearable placeholder="请选择">
          <el-option
            v-for="item in countryList"
            :key="item.countryId"
            :label="item.alphaCode"
            :value="item.countryId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="amzRegionId" label="区域">
        <el-select v-model="formData.amzRegionId" filterable clearable placeholder="请选择">
          <el-option
            v-for="(item,index) in amzRegionList"
            :key="index"
            :label="item.amzRegionCode"
            :value="item.amazonRegionId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="type" label="asin或sku">
        <el-row>
          <el-col :span="10">
            <el-select v-model="formData.type" placeholder="请选择">
              <el-option label="asin" value="asin"></el-option>
              <el-option label="sku" value="sku"></el-option>
            </el-select>
          </el-col>
          <el-col :span="10">
            <el-radio-group v-model="formData.isInclude" style="margin-left:20px">
              <el-radio :label="1">包含</el-radio>
              <el-radio :label="0">不包含</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="asin" label="asin" v-if="formData.type === 'asin'">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="formData.asin"
        ></el-input>
      </el-form-item>
      <el-form-item prop="sku" label="sku" v-else>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="formData.sku"
        ></el-input>
      </el-form-item>
      <el-form-item prop="orderId" label="排除orderId">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="formData.orderId"
        ></el-input>
      </el-form-item>
      <el-form-item prop="orderTime" label="下单后时间范围">
        <el-date-picker
          @change="orderTime"
          v-model="formData.orderTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="timeInterval" label="执行时间间隔">
        <el-input-number v-model="formData.timeInterval" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item prop="clickQuantity" label="点击数量">
        <el-input-number v-model="formData.clickQuantity" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item prop="planTime" label="计划时间">
        <el-date-picker
          @change="planTime"
          v-model="formData.planTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="执行时间范围">
        <el-row>
          <el-col :span="11">
            <el-form-item prop="rangeStart">
              <el-time-select
                placeholder="起始时间"
                v-model="formData.rangeStart"
                :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '24:00'
            }"
              ></el-time-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="rangeEnd" label-width="20px">
              <el-time-select
                placeholder="结束时间"
                v-model="formData.rangeEnd"
                :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '24:00',
              minTime: formData.rangeStart
            }"
              ></el-time-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="submitForm('formData')"
        size="small"
        :disabled="loading"
        :icon="loading?'el-icon-loading':'el-icon-circle-plus-outline'"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { reviewplanSave } from "@/api/reviewPlanController";
export default {
  props: {
    accountList: {
      type: Array,
      define: [],
    },
    countryList: {
      type: Array,
      define: [],
    },
    amzRegionList: {
      type: Array,
      define: [],
    },
  },
  data() {
    return {
      open: false,
      formData: {},
      loading: false,
      title: "",
      rules: {
        planName: [
          { required: true, message: "请输入计划标识", trigger: "blur" },
        ],
        accountId: [
          {
            required: true,
            message: "请选择账号",
            trigger: "change",
          },
        ],
        siteId: [
          {
            required: true,
            message: "请选择站点",
            trigger: "change",
          },
        ],
        amzRegionId: [
          {
            required: true,
            message: "请选择区域",
            trigger: "change",
          },
        ],
        asin: [{ required: true, message: "请输入ASIN", trigger: "blur" }],
        sku: [{ required: true, message: "请输入SKU", trigger: "blur" }],
        orderId: [
          { required: true, message: "请输入排除orderId", trigger: "blur" },
        ],
        orderTime: [
          {
            required: true,
            message: "请选择下单后时间范围",
            trigger: "change",
          },
        ],
        planTime: [
          {
            required: true,
            message: "请选择计划时间",
            trigger: "change",
          },
        ],
        rangeStart: [
          {
            required: true,
            message: "请选择执行开始时间范围",
            trigger: "change",
          },
        ],
        rangeEnd: [
          {
            required: true,
            message: "请选择执行结束时间范围",
            trigger: "change",
          },
        ],
      },
      disabled: false,
    };
  },
  methods: {
    show() {
      this.title = "新增";
      this.open = true;
      this.formData = {
        planName: "",
        accountId: "",
        siteId: "",
        amzRegionId: "",
        type: "asin",
        asin: "",
        sku: "",
        orderId: "",
        orderTime: [],
        orderTimeStart: "",
        orderTimeEnd: "",
        isInclude: 0,
        timeInterval: 0,
        clickQuantity: 0,
        planTime: [],
        planTimeStart: "",
        planTimeEnd: "",
        rangeStart: "",
        rangeEnd: "",
        updateUser: this.$store.getters.userId,
      };
    },
    edit(rows) {
      console.log(rows);
      const row = JSON.parse(JSON.stringify(rows));
      this.title = "编辑";
      this.open = true;
      this.formData = {
        orderTime: [row.orderTimeStart, row.orderTimeEnd],
        planTime: [row.planTimeStart, row.planTimeEnd],
        type: row.asin ? "asin" : "sku",
        ...row,
      };
      this.formData.updateUser = this.$store.getters.userId;
    },
    orderTime(time) {
      if (time) {
        this.formData.orderTimeStart = time[0];
        this.formData.orderTimeEnd = time[1];
      } else {
        this.formData.orderTimeStart = "";
        this.formData.orderTimeEnd = "";
      }
    },
    planTime(time) {
      if (time) {
        this.formData.planTimeStart = time[0];
        this.formData.planTimeEnd = time[1];
      } else {
        this.formData.planTimeStart = "";
        this.formData.planTimeEnd = "";
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          reviewplanSave(this.formData).then((res) => {
            this.loading = false;
            if (res.data.code === this.ERR_OK) {
              this.open = false;
              this.$emit("load");
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-date-editor {
  width: 100%;
}
</style>